<template>
  <div class="login-container">
    <div class="login-box">
      <div class="logo"><h1>登录</h1></div>
      <el-form ref="loginForm" :model="loginForm" class="login-form">
        <el-form-item>
          <el-input
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
              required
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              required
          ></el-input>
        </el-form-item>
        <el-form-item class="login-btn-group">
          <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
          <el-link type="primary" @click="handleForgotPassword">点击注册</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round class="login-btn" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';

export default {
  name: 'LoginUser',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        remember: false,
      },
    };
  },
  methods: {
    async handleLogin() {
      try {
        // 1. 前端先校验表单（避免空账号密码提交）
        if (!this.loginForm.username || !this.loginForm.password) {
          Message.warning('请输入用户名和密码');
          return;
        }

        // 2. 发送登录请求（确保后端地址正确）
        const loginRes = await axios.post(
            'http://localhost:8080/api/login', // 后端登录接口地址
            {
              username: this.loginForm.username,
              password: this.loginForm.password
            },
            { headers: { 'Content-Type': 'application/json' } }
        );

        // 3. 关键：先打印后端返回的完整数据，确认有 userInfo 和 userId
        console.log('后端登录返回完整数据：', loginRes.data);
        // （必须看控制台！确保 loginRes.data.data 中包含 userId，如 {userId:123, username:"张三"}）

        // 4. 校验后端返回格式（核心：code=200 且 data 有 userId）
        if (loginRes.data && loginRes.data.code === 200) {
          const userInfo = loginRes.data.data; // 后端返回的用户信息
          // 4.1 确保 userInfo 有 userId（否则存储了也没用）
          if (userInfo && userInfo.id) {
            // 存入 localStorage（JSON.stringify 必须加，避免存储成 [object Object]）
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            // 可选：记住密码（若需要）
            if (this.loginForm.remember) {
              localStorage.setItem('savedUsername', this.loginForm.username);
            } else {
              localStorage.removeItem('savedUsername');
            }

            Message.success('登录成功，即将跳转首页');
            this.$router.push('/zhuye'); // 跳转到首页/订单页（确保路由地址正确）
          } else {
            // 后端返回的用户信息没有 userId，提示并打印错误
            Message.error('登录失败：后端未返回用户ID');
            console.error('后端返回的用户信息缺少 id：', userInfo);
          }
        } else {
          // 后端返回业务失败（如账号密码错误）
          Message.warning(`登录失败：${loginRes.data?.msg || '用户名或密码错误'}`);
        }
      } catch (error) {
        // 网络错误或请求异常
        console.error('登录请求异常：', error);
        Message.error('登录出错，请检查后端是否启动或接口地址是否正确');
      }
    },
    handleForgotPassword() {  // 移除了这里的多余逗号
      this.$router.push('/register');
    }
  },
};
</script>


<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom right, #6a11cb, #2575fc);
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box {
  width: 350px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.logo {
  text-align: center;
  margin-bottom: 20px;
}
.login-form {
  width: 100%;
}
.login-btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.login-btn {
  width: 100%;
  padding: 10px 0;
}
</style>